<template>
  <gimi-dialog
    v-model="visible"
    title="导图分享"
    confirmIcon="ri-links-fill"
    :okLoading="okLoading"
    :disabledOk="!profileDetails"
    @cancel="handleCancel"
    @ok="handleSubmitForm"
  >
    <el-form ref="formRef" :model="form">
      <el-form-item prop="userId">
        <el-input
          v-model="form.userId"
          size="large"
          :maxlength="16"
          placeholder="请输入9至12位的用户标识"
          @change="handleUserIdChange">
          <template #suffix>
            <i v-if="loading" class="ri-loader-2-line loading-icon"></i>
          </template>
        </el-input>
      </el-form-item>
    </el-form>
    <transition name="fade-in-top">
      <template v-if="profileDetailVisible">
        <div class="user-details" v-if="profileDetails">
          <img :src="profileDetails.avatar" alt="avatar" class="avatar">
          <p class="username">{{ profileDetails.nickname }}</p>
          <el-checkbox checked></el-checkbox>
        </div>
        <p class="tip" v-else>未查询到导图用户，请检查用户标识是否正确！</p>
      </template>
    </transition>
  </gimi-dialog>
</template>

<script setup lang="ts">
import { ref, reactive, defineEmits, defineProps } from 'vue'
import { ElMessage, ElForm } from 'element-plus'
import { apiQueryUserProfileById, apiMindShare } from '@/apis/work'
import type { User } from '@/types'

const emits = defineEmits(['close-modal'])
const props = defineProps({
  mindId: String
})

const formRef = ref<InstanceType<typeof ElForm>>()
const visible = ref(true)
const profileDetails = ref<null | User>(null)
const profileDetailVisible = ref(false)
const okLoading = ref(false)
const form = reactive({
  userId: ''
})

const handleSubmitForm = async () => {
  okLoading.value = true
  await formRef.value?.validate()
  try {
    await apiMindShare({
      mindId: props.mindId,
      targetId: form.userId
    })
    ElMessage.success('操作成功')
    emits('close-modal', true)
  } finally {
    okLoading.value = false
  }
}

const handleUserIdChange = async (userId: string) => {
  if (userId) {
    queryUserProfileById(userId)
  } else {
    profileDetails.value = null
    profileDetailVisible.value = false
  }
}

/**
 * 根据用户id查询用户信息
 * @param id
 */
const loading = ref(false)
const queryUserProfileById = async (id: string) => {
  loading.value = true
  try {
    const data = await apiQueryUserProfileById<User>(id)
    profileDetails.value = data
    profileDetailVisible.value = true
  } finally {
    loading.value = false
  }
}

const handleCancel = () => {
  emits('close-modal')
}
</script>

<style lang="scss" scoped>
.user-details {
  display: flex;
  align-items: center;
  margin-top: 24px;
  user-select: none;
  padding: 0 12px;
  .avatar {
    width: 38px;
    height: 38px;
    object-fit: cover;
    margin-right: 12px;
    border-radius: 50%;
  }

  .username {
    color: #000;
  }

  .el-checkbox {
    --el-checkbox-input-height: 16px;
    --el-checkbox-input-width: 16px;
    --el-checkbox-border-radius: 2px;
    margin-left: auto;
    margin-right: 6px;
    pointer-events: none;
    :deep(.el-checkbox__inner) {
      &::after {
        left: 5px;
        top: 2px;
      }
    }
  }

}

.tip {
  font-size: 13px;
  color: #999;
  text-align: center;
  margin: 24px 0;
}

.loading-icon {
  display: inline-block;
  animation: rotate 2.4s linear infinite;
  color: #333;
}

@keyframes rotate {
  from {
    transform: rotate(0);
  }

  to {
    transform: rotate(360deg);
  }
}
</style>
